import React, { Component } from "react";
import "./index.css";
import { Button, Input, Table, Switch } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import axios from "../../../../../util/axios";
const { Search } = Input;
//
class Staff extends Component {
  state = {
    columns: [
      {
        title: "登录姓名",
        dataIndex: "username",
        key: "username",
        align: "center",
      },
      {
        title: "密码",
        dataIndex: "password",
        key: "password",
        align: "center",
      },
      {
        title: "权限组",
        dataIndex: "nickname",
        key: "nickname",
        align: "center",
      },
      {
        title: "简单说明",
        dataIndex: "title",
        key: "title",
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "lls",
        key: "lls",
        align: "center",
        render: (text, record) => (
          <Switch
            checked={record.lls.length === 4 ? true : false}
            disabled={true}
            onChange={this.onChange}
          />
        ),
      },
      {
        title: "操作",
        align: "center",
        render: (text, record) => (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-around",
            }}
          >
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => {
                this.changeVal(record);
              }}
            />
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              style={{ margin: "0 5px" }}
              onClick={() => {
                this.deltetIt(record.id);
              }}
            />
          </div>
        ),
      },
    ],
    list: [],
    loading: true,
    isShow: false,
    isAdd: false,
    inpValObj: {
      longinName: "",
      name: "",
      auth: "",
      text: "",
      state: false,
    },
    coeId: "",
  };
  componentDidMount() {
    this.getList();
  }
  onChange(checked) {
    console.log(`switch to ${checked}`);
  }
  //编辑
  changeVal = (record) => {
    console.log(record);
    this.setState({
      isShow: true,
      coeId: record.id,
      inpValObj: {
        longinName: record.username,
        name: record.password,
        auth: record.nickname,
        text: record.title,
        state: record.lls.length === 4 ? true : false,
      },
    });
  };
  //删除
  deltetIt = (id) => {
    console.log(id);
    axios.get(`/loginquan?id=${id}`).then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        setTimeout(() => {
          this.getList();
        }, 800);
      }
    });
  };
  getList() {
    axios.get("/loginquan").then((res) => {
      console.log(res);
      if (res.data.code === 200) {
        setTimeout(() => {
          this.setState({
            list: res.data.data,
            loading: false,
          });
        }, 800);
      }
    });
  }
  onSearch = (value) => console.log(value);
  //新增
  addNewList = () => {
    this.setState({
      isShow: true,
      isAdd: true,
    });
    //style={{ display: this.state.isShow ? 'block' : "none" }}
  };
  onFinish = (values) => {
    console.log(values);
  };

  changeLogin = (e) => {
    this.setState({
      inpValObj: {
        ...this.state.inpValObj,
        longinName: e.target.value,
      },
    });
  };
  changeName = (e) => {
    this.setState({
      inpValObj: {
        ...this.state.inpValObj,
        name: e.target.value,
      },
    });
  };
  changeAuth = (e) => {
    this.setState({
      inpValObj: {
        ...this.state.inpValObj,
        auth: e.target.value,
      },
    });
  };
  changeText = (e) => {
    this.setState({
      inpValObj: {
        ...this.state.inpValObj,
        text: e.target.value,
      },
    });
  };
  changeState = (e) => {
    this.setState({
      inpValObj: {
        ...this.state.inpValObj,
        state: e,
      },
    });
  };
  //确定
  submit = () => {
    console.log(this.state.isAdd);
    if (this.state.isAdd) {
      axios
        .get(`/loginquan`, {
          params: {
            username: this.state.inpValObj.longinName,
            password: this.state.inpValObj.name,
            nickname: this.state.inpValObj.auth,
            lls: this.state.inpValObj.state,
            title: this.state.inpValObj.text,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.getList();
          }
        });
    } else {
      axios
        .get(`/loginquans`, {
          params: {
            id: this.state.coeId,
            username: this.state.inpValObj.longinName,
            password: this.state.inpValObj.name,
            nickname: this.state.inpValObj.auth,
            title: this.state.inpValObj.text,
            lls: this.state.inpValObj.state,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.getList();
          }
        });
    }
    console.log(this.state.inpValObj);
    this.setState({
      isShow: false,
      inpValObj: {
        longinName: "",
        name: "",
        auth: "",
        text: "",
        state: false,
      },
    });
  };
  //取消
  onReset = () => {
    console.log(this.state.coeId);
    this.setState({
      isShow: false,
      inpValObj: {
        longinName: "",
        name: "",
        auth: "",
        text: "",
        state: false,
      },
    });
  };
  render() {
    let { longinName, name, auth, text, state } = this.state.inpValObj;
    return (
      <div className="Staff">
        <div className="StaffHead">
          <Button type="primary" onClick={this.addNewList}>
            新增
          </Button>
          <Search
            placeholder="input search text"
            onSearch={this.onSearch}
            style={{ width: 200 }}
          />
        </div>
        <div className="StaffMina">
          <Table
            dataSource={this.state.list}
            columns={this.state.columns}
            rowKey="id"
            loading={this.state.loading}
          />
        </div>
        <div
          className="Staff_mask"
          style={{ display: this.state.isShow ? "block" : "none" }}
        >
          <div className="Staff_mask_inner">
            <h3>{this.state.isAdd ? "新增" : "编辑"}</h3>
            <ul className="changeList">
              <li>
                <p>登录姓名:&nbsp;&nbsp;</p>
                <input
                  type="text"
                  value={longinName}
                  onChange={this.changeLogin}
                />
              </li>
              <li>
                <p>
                  姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;
                </p>
                <input type="text" value={name} onChange={this.changeName} />
              </li>
              <li>
                <p>权&nbsp;&nbsp;限&nbsp;&nbsp;组:&nbsp;&nbsp;</p>
                <input type="text" value={auth} onChange={this.changeAuth} />
              </li>
              <li>
                <p>简单说明:&nbsp;&nbsp;</p>
                <input type="text" value={text} onChange={this.changeText} />
              </li>
              <li>
                <p>
                  状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </p>
                <Switch checked={state} onChange={this.changeState} />
              </li>
            </ul>
            <div className="staff_btn">
              <Button type="primary" htmlType="submit" onClick={this.submit}>
                {" "}
                确定{" "}
              </Button>
              <Button htmlType="button" onClick={this.onReset}>
                {" "}
                取消
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Staff;
